<template>
	<view class="content">
		<view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower"
				@scroll="scroll">
				<home ref="home" :city='city' :alpha='alpha' :result='result'></home>
				<view class="" style="height: 50rpx;">

				</view>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower"
				@scroll="scroll">
				<lvyou ref="lvyou" :alpha='alpha'></lvyou>
				<view class="" style="height: 50rpx;">

				</view>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower"
				@scroll="scroll">
				<personal ref="personal" :userinfo='userinfo'></personal>
				<view class="" style="height: 50rpx;">

				</view>
			</scroll-view>
		</view>
		<button class="kef u-reset-button" open-type="contact">
			<image src="/static/product/kf.png" class="keficon" mode=""></image>
		</button>

		<tn-tabbar v-model="currentIndex" :list="tabbarList" activeColor="#45c47b" inactiveColor="#030303"
			:animation="true" :safeAreaInsetBottom="true" @change="switchTabbar" :height='117' :iconSize='42'
			:fontSize='20' :activeStyle="activeStyle" inactiveIconColor='#030303' activeIconColor='#45c47b'
			:beforeSwitch="beforeSwitch"></tn-tabbar>
	</view>
</template>

<script>
	// #ifdef MP-WEIXIN
	const citySelector = requirePlugin('citySelector')
	// #endif
	import home from '../home/home.vue'
	import lvyou from '../lvyou/lvyou.vue'
	import personal from '../personal/personal.vue'
	import user from '@/api/_user.js'
	import {
		BASE_URL
	} from '@/api/config'
	export default {
		components: {
			home,
			lvyou,
			personal
		},
		data() {

			return {
				city: {
					code: "",
					fullname: "定位中"
				},
				tabbarList: [{
						title: '首页',
						activeIcon: '/static/tabbar/hometh.png',
						inactiveIcon: '/static/tabbar/home.png'
					},
					{
						title: '云游商城',
						activeIcon: '/static/tabbar/shopth.png',
						inactiveIcon: '/static/tabbar/shop.png'
					},
					{
						title: '我的',
						activeIcon: '/static/tabbar/myth.png',
						inactiveIcon: '/static/tabbar/my.png'
					}
				],
				// tabbar当前被选中的序号
				currentIndex: 0,
				tabberPageLoadFlag: [],
				activeStyle: {
					width: '118rpx',
					height: '118rpx'
				},
				alpha: true,
				sctop: 0,
				userinfo: {},
				triggered1: false,
				triggered2: false,
				triggered3: false,
				result: {}
			}
		},
		onLoad(options) {
			const scene = options.scene
			this.$tn.vuex('vuex_salt', scene)
			this.gethomedata()

			const index = Number(options.index || 0)
			// 根据底部tabbar菜单列表设置对应页面的加载情况
			this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
				return index === tabbar_index
			})
			this.switchTabbar(index)

		},

		onShow() {
			// console.log(this.currentIndex==2)
			let _this=this
			if(this.currentIndex==2){
				this.$tn.http.get(BASE_URL + '/api/user/index', {
					header: {
						token:_this.$store.state.vuex_token
					},
				}).then(res => {
					_this.userinfo=res.data.data
					_this.$tn.vuex('vuex_userinfo', res.data.data)
					_this.$tn.vuex('vuex_token', res.data.data.token)
					return true
				}).catch(err => {
					_this.userinfo={}
					return false
				})
			}
			// #ifdef MP-WEIXIN
			const selectedCity = citySelector.getCity();
			if (selectedCity) {
				this.city = selectedCity
				console.log(this.city)
			} else {
				let _this = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						uni.request({
							url: 'https://restapi.amap.com/v3/geocode/regeo',
							method: 'GET',
							data: {
								location: `${res.longitude},${res.latitude}`,
								key: 'db352a63c2b0f01f1bb38a97493c66ce'
							},
							success(res1) {
								_this.city.fullname = res1.data.regeocode.addressComponent.city
							}
						})
					},
					fail(err) {
						console.log(err)
					}
				});
			}

			// #endif
		},
		methods: {
			// 切换导航
			switchTabbar(index) {
				this._switchTabbarPage(index)
			},
			async gethomedata() {
				this.result = await this.$tn.http.get(BASE_URL + '/api/index/initData')
			},
			// 导航页面滚动到底部
			tabbarPageScrollLower(e) {},

			// 切换导航页面
			_switchTabbarPage(index) {
				this.alpha = true
				this.tabbarList.map(t => {
					t.out = false
				})
				this.tabbarList[index].out = true
				const selectPageFlag = this.tabberPageLoadFlag[index]
				if (selectPageFlag === undefined) {
					return
				}
				if (selectPageFlag === false) {
					this.tabberPageLoadFlag[index] = true
				}
				this.currentIndex = index
			},
			scroll(e) {
				// console.log(e)
				if (e.detail.scrollTop > 0) {
					this.alpha = false
				} else {
					this.alpha = true
				}
			},
			async beforeSwitch(index) {
				let _this=this
				// await等待一个请求，请求回来后再返回true，再进行切换
				switch (index) {
					case 2:
					console.log(_this.$store.state.vuex_token)
						this.$tn.http.get(BASE_URL + '/api/user/index', {
							header: {
								token:_this.$store.state.vuex_token
							},
						}).then(res => {
							_this.userinfo=res.data.data
							_this.$tn.vuex('vuex_userinfo', res.data.data)
							_this.$tn.vuex('vuex_token', res.data.data.token)
							return true
						}).catch(err => {
							if(err.data.code==401){
								uni.$tn.message.toast('请登录')
								setTimeout(()=>{
									uni.navigateTo({
										url:'/pages/my/login'
									})
								},1000)
							}
							// return false
						})

						break;
				}

			}
		}
	}
</script>

<style lang="scss">
	.index {
		overflow: hidden;
		height: 100%;
	}

	.custom-tabbar-page {
		height: calc(100vh - (100rpx + env(safe-area-inset-bottom) / 2));
	}

	// 去除button的所有默认样式，让其表现跟普通的view、text元素一样
	.u-reset-button {
		padding: 0;
		background-color: transparent;
		/* #ifndef APP-PLUS */
		font-size: inherit;
		line-height: inherit;
		color: inherit;
		/* #endif */
		/* #ifdef APP-NVUE */
		border-width: 0;
		/* #endif */
	}

	/* #ifndef APP-NVUE */
	.u-reset-button::after {
		border: none;
	}

	/* #endif */
</style>